<template>
  <div class="header-box">
    <van-search disabled show-action placeholder="请输入搜索关键词">
      <template #left>
        <div class="header-left">
            <van-icon v-if="!city" name="replay" />
            <span v-else >{{city}}</span>
        <van-icon name="arrow-down" /></div>
      </template>
    </van-search>
    <!-- 百度地图定位 -->
    <baidu-map class="map bm-view" @ready="baiduReady"></baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: {
        lng: 115.7,
        lat: 39.4
      },
      city: ''
    };
  },
  methods: {
    baiduReady({BMap}) {
        // 获取百度地图定位的实例
        const geolocation = new BMap.Geolocation();

        // 定位
        geolocation.getCurrentPosition((res) => {
            console.log(res)
            // 获取当前城市的经纬度
            this.center = {
                lng: res.point.lng,
                lat: res.point.lat
            }

            // 获取当前城市的地级市名称
            this.city = res.address.city;
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.header-box {
  width: 100%;
  height: 50px;
  flex-shrink: 0;
  overflow: hidden;
}

.header-left {
  padding-right: 10px;
}

.bm-view {
  width:0;
  height: 0;
}
</style>
